<template>
	<view class="container">
		<view class="position-relative">
			<image src="https://z3.ax1x.com/2021/09/17/4uR1IO.jpg" class="bg"></image>
		</view>
		<view style="padding: 0rpx 30rpx;">
			<!-- user box begin -->
			<view class="d-flex flex-column bg-white user-box" style="height: 150rpx;">
				
				<view class="d-flex align-items-center">
					<view class="avatar">
						<image :src="isLogin ? member.avatar : '/static/weidenglu.png'"></image>
					</view>
					<view class="d-flex flex-column flex-fill overflow-hidden" style="margin-top: 20rpx;">
						<view v-if="isLogin" class="font-size-lg font-weight-bold "
							@tap="userinfo">
							<view class="text-truncate">{{ member.nickname }}</view>
							<view class="" style="font-size: 25rpx; color: #999999;">就诊卡{{num}}张</view>
						</view>
						<view v-else class="font-size-lg" @tap="login">请点击授权登录</view>
					</view>
				</view>
				
				<!-- user grid end -->
			</view>
			
			<!-- user box end -->
			<!-- level benefit box begin -->
			<!-- <view class="level-benefit-box" > -->
				<!-- <view class="">
					<view class="addka" @click="addjiuzhenka" v-show="!flag">+添加就诊卡</view>
					<view  v-show="flag" style=" margin:20rpx 0rpx 0rpx 60rpx;">
						<view >
						 <view style="font-size: 32rpx; color: #3ECEB6; font-weight: bold; margin-bottom:10rpx;">{{username}}</view>
						<view style="font-size: 26rpx; color: #3ECEB6;">{{userId}}</view>
						</view>
					</view>
					
				</view> -->
				<view class="info">
					<view class="integral_section" @tap="integrals">
				
						<view class="bottom" >
							<button type="default" v-show="!flag">添加就诊卡</button>
							<view  v-show="flag" style=" margin:20rpx 0rpx 0rpx 60rpx;">
								 <view style="font-size: 32rpx; color: #3ECEB6; font-weight: bold; margin-bottom:10rpx;">{{username}}</view>
								<view style="font-size: 26rpx; color: #3ECEB6;">{{userId}}</view>
							</view>
						</view>
						
					</view>
					<view class="qrcode_section" @tap="memberCode">
						<image src="../../static/images/index/check2.jpg"></image>
					</view>
				</view>
				
				
			
		<!-- 	</view> -->
			
			<view class="service-box">
				<view class="font-size-lg text-color-base " style="margin-bottom: 10rpx;">我的服务</view>
				<view class="category-list">
					<view class="category" v-for="(row, index) in categoryList" :key="index"
						@tap="toCategory(row.url)">
						<view class="img">
							<image :src="row.img"></image>
						</view>
						<view class="text">{{ row.name }}</view>
					</view>
				</view>
			</view>
			
		</view>
		<!-- service box begin -->
		
		
	</view>
</template>

<script>
	import {mapState, mapGetters} from 'vuex'
	import mm from '../../api/member.js'
	export default {
		data() {
			return {
				newIcon: 'https://img-shop.qmimg.cn/s16/images/2020/05/12/ffb0613dded704b6.png',
				nickName:'',
				avatarUrl: '/static/logo.png',
				categoryList: [{
						id: 1,
						name: '挂号记录',
						img: '/static/images/mine/guahaojilu.png',
						url:'/pages/appointment/guahaojilu'
						
					},
					{
						id: 2,
						name: '门诊缴费记录',
						img: '/static/images/mine/jiaofeiguanli.png',
						url:''
					},
					{
						id: 3,
						name: '住院缴费记录',
						img: '/static/images/mine/zhuyuanjiaofei.png ',
						url:''
					},
					{
						id: 4,
						name: '诊卡充值记录',
						img: '/static/images/mine/chongzhi.png',
						url:''
					},
					{
						id: 5,
						name: '病例复印记录',
						img: '/static/images/mine/bingli.png',
						url:''
					},
					{
						id: 6,
						name: '我的收藏',
						img: '/static/images/mine/wodeshoucang.png',
						url:''
					},
				],
				num:0,
				flag:"",
				jiuzhenren:[],
				userId:'',
				username:''
			}
		},
		computed: {
			...mapState(['member']),
			...mapGetters(['isLogin']),
		},
		onLoad() {
		},
		onShow() {
			if (this.isLogin) {
			this.getjiuzhenren()
			}
		},
		methods: {
			login() {
				uni.navigateTo({
					url: '/pages/login/login'
				})
			},
			userinfo() {
				if(!this.isLogin) {
					this.login()
					return
				}
				uni.navigateTo({
					url: '/pages/addjiuzhenren/addjiuzhenren'
				})
			},
			addjiuzhenka(){
				if(!this.isLogin){
					this.login();
					return
				}
				uni.navigateTo({
					url:'/pages/admintabulation/admintabulation'
				})
			},
			toCategory(url) {
				// 判断是否登录
				if (!this.isLogin) {
					// 未登录跳转到登录页面
					uni.navigateTo({
						url: '/pages/login/login'
					})
					return
				}
				if(!url){
					uni.showToast({title: '模板未包含此页面',icon:"none"});
					return;
				}
				uni.navigateTo({
					url:url
				})
			},
			integrals() {
				if (!this.isLogin) {
					uni.navigateTo({
						url: '/pages/login/login'
					})
					return
				}
				uni.navigateTo({
					url: '/pages/integrals/integrals'
				})
			},
			
			getjiuzhenren() {
				
				var data = {
					info: JSON.stringify({
			
						"openid": mm.openid
					})
				};
				this.$api.getjiuzhenren(data).then(res => {
			
					console.log('查到的数据:' + JSON.stringify(res));
					for(var i=0;i<res.length;i++){
						if(res[i].card!=null){
							this.jiuzhenren[i]=res[i]
						}
					}
					
					
					this.num=this.jiuzhenren.length;
					if(this.jiuzhenren.length>1){
						
					
					if(this.jiuzhenren[0].card==null){
						this.flag=false;
						console.log("按钮消失")
						this.num=0
					}else{
						this.flag=true;
						if (this.jiuzhenren.length == 1) {
							this.userId = this.jiuzhenren[0].card;
							this.username = this.jiuzhenren[0].name;
							
						} else {
							for (var i = 0; i < this.jiuzhenren.length; i++) {
									
								if (this.jiuzhenren[i].thepatient == 1) {
									this.userId = this.jiuzhenren[i].card;
									this.username = this.jiuzhenren[i].name;
								}else{
									this.userId = this.jiuzhenren[0].card;
									this.username = this.jiuzhenren[0].name;
								}
									
							}
						}
						}
						
						
					}
					
					
			
				}).catch(err => {
					// 登录失败
					uni.hideLoading()
					uni.showToast({
						title: '查找失败',
						icon: 'none'
					});
			
				})
				
			},
			
		
		}
	}
</script>

<style lang="scss" scoped>
page {
	height: auto;
	min-height: 100%;
}	

.bg {
	width: 100%;
	height: calc(250 / 594 * 750rpx);
}
.info {
		position: relative;
		margin-bottom: 30rpx;
		border-radius: 10rpx;
		background-color: #ffffff;
		box-shadow: $box-shadow;

		display: flex;
		align-items: center;
		justify-content: center;

		.integral_section {
			flex: 1;
			display: flex;
			flex-direction: column;
			justify-content: center;

			.top {
				display: flex;
				align-items: center;

				.title {
					color: $text-color-base;
					font-size: $font-size-base;
					margin-right: 10rpx;
				}

				.value {
					font-size: 44rpx;
					font-weight: bold;
				}
			}

			.bottom {
				font-size: $font-size-sm;
				color: $text-color-assist;
				display: flex;
				align-items: center;

				button {
					width: 250rpx;
					margin-left: 50rpx;
					background-color: transparent;
					border-style: none;
					font-size: 28rpx;
					color: #3ECEB6;
				}

			}
		}

		.qrcode_section {
			color: $color-primary;
			display: flex;

			flex-direction: column;
			align-items: center;
			justify-content: center;
			font-size: $font-size-sm;

			image {
				width: 400rpx;
				height: 165rpx;

			}

		}
	}

.hym-btn {
	position: absolute;
	top: 40rpx;
	right: 40rpx;
	color: $color-primary;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50rem;
	font-size: $font-size-sm;
	box-shadow: 0 0 20rpx rgba(66,66,66,0.1);
	&::after {
		border: 0;
	}
	
	image {
		width: 30rpx;
		height: 30rpx;
		margin-right: 10rpx;
	}
}

.user-box {
	position: relative;
	border-radius: 8rpx; 
	margin-bottom: 30rpx;
	margin-top: -115rpx;
	box-shadow: $box-shadow;
}

.avatar {
	position: relative;
	margin-top: -35rpx;
	margin-left: 35rpx;
	margin-right: 35rpx;
	width: 160rpx;
	height: 160rpx;
	border-radius: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: #FFFFFF;
	box-shadow: 0 0 20rpx rgba($color: #000000, $alpha: 0.2);
	
	image {
		width: 140rpx;
		height: 140rpx;
		border-radius: 100%;
	}
	
	
}

.fontcolor{
	color:  #000000,
}
// 添加就诊卡样式
.level-benefit-box {
	border-radius: 8rpx; 
	margin-bottom: 30rpx;
	height: 160rpx;
	width: 100%;
	background-color: #FFFFFF;
	display: flex;
	align-items: center;
	justify-content: center;
	.addka{
		font-size: 40rpx;
		color:  #3ECEB6;
		line-height: 80rpx;
		
	}
	
	
}

.service-box {
	width: 100%;
	background-color: #FFFFFF;
	padding: 32rpx 30rpx 10rpx ;
	box-shadow: $box-shadow;
	height: 600rpx;
	.category-list {
		width: 100%;
		padding: 0 0 30upx 0;
		// border-bottom: solid 2upx #f6f6f6;
		display: flex;
		// justify-content: space-between;
		flex-wrap: wrap;
	
		.category {
			width: 25%;
			margin-top: 20upx;
			display: flex;
			flex-wrap: wrap;
	
			.img {
				width: 100%;
				display: flex;
				justify-content: center;
	
				image {
					width: 9vw;
					height: 9vw;
				}
			}
	
			.text {
				margin-top: 16upx;
				width: 100%;
				display: flex;
				justify-content: center;
				font-size: 24upx;
				color: #3c3c3c;
			}
		}
	}
	
	
}
</style>
